<template>
	<view class="qiun-columns">
		<view id="viewHeader">
			<view class="select-box">
				<sun-dropDown v-on:onSubmitAddress="onSubmitAddress"></sun-dropDown>
			</view>
			<view class="dates-box ">
				<view class="dates f-row-between">

					<view class="date f-center" :style="{ width: 100 / 3 - 3 + '%' }" :class="selected == 'mz' ? 'selected' : ''"
					 @click="selected ='mz'">
						周
					</view>
					<view class="date f-center" :style="{ width: 100 / 3 - 3 + '%' }" :class="selected == 'm' ? 'selected' : ''"
					 @click="selected ='m'">
						月
					</view>
					<view class="date f-center" :style="{ width: 100 / 3 - 3 + '%' }" :class="selected == 'y' ? 'selected' : ''"
					 @click="selected = 'y'">
						年
					</view>
				</view>
				<uni-superDates :dateTypes="[ 'mz', 'm', 'y']" :selected="selected" v-on:onSubmit="onSubmit"></uni-superDates>
			</view>
			<view class="chart-box">
				<view class="money-block f-row-between">
					<view class="money-item f-column-WHcenter" v-for="(val, key, i) in resData.total" @click="onChartDataType(key)"
					 v-if="key != 'length'" :style="{ backgroundImage: resData.total[key].backgroundImage, width: 100 / chartData.series.length - 10 + '%' }">
						<view class="money f-row-Wcenter">
							<label v-show="chartData.series[key][0].name != '消费占比' && chartData.series[key][0].name != '新增会员'">￥</label>
							<label>{{ resData.total[key].numder }}</label>
							<label class="unit">{{ chartData.series[key][0].name == '消费占比' ? '%' : resData.total[key].unit }}</label>
						</view>
						<view>
							<label class="title">{{ chartData.series[key][0].name }}</label>
						</view>
					</view>
				</view>
				<view class="qiun-charts f-column-start">
					<canvas type="2d" canvas-id="cvsGuestOrder" id="cvsGuestOrder" class="charts" @touchstart="touchRing">
					</canvas>
				</view>
			</view>
		</view>

		<view id="retailDetails-box" class="retailDetails-box">
			<view class="sun-tietleBox">
				<sun-tietleBox :tietleData="'会员明细'">
					<view class="date f-center" :class="resData.sortkey == 'new_vip' ? 'selected' : ''" @click="onDateType('new_vip')"
					 style="margin: 0 20upx;">按全部</view>
					<view class="date f-center" :class="resData.sortkey == 'viptype_name' ? 'selected' : ''" @click="onDateType('viptype_name')">按分类</view>
				</sun-tietleBox>
			</view>
			<!-- height: topHeight  +'rpx', -->
			<view :id="idTopHeight" class="table-box f-row-Wcenter" :style="{padding:tableMargin +'rpx'}">
				<!-- 撑满屏幕 -->
				<!-- :height="topHeight - (tableMargin * 2) +'rpx'" -->
				<wyb-table ref="table" :width="'710rpx'" :defaultColWidth="defaultColWidth" :headers="headers" :contents="resData.list"
				 :header-bg-color="'#128A80'" :header-ft-color="'#ffffff'" :loading="false" :first-line-fixed="false" :maxHeight="topHeight - tableMargin * 2  +'rpx'"
				 :url-col="urlCol" :min-height="[65,50]" />
			</view>
		</view>
	</view>
</template>

<script>
	var canvaRing = null;
	import sunTietleBox from '@/components/sun-titleBox/sun-tietleBox.vue';
	import sunDropDown from '@/components/sun-dropDown/sun-dropDown.vue';
	import api_server from '@/api/api_server.js';
	import uCharts from '@/components/u-charts/u-charts.js';

	import wybTable from '@/components/wyb-table/wyb-table.vue';

	export default {
		components: {
			wybTable,
			sunTietleBox,
			sunDropDown
		},
		data() {
			return {
				selected: 'mz',
				//平分表宽
				defaultColWidth: 167,
				//日期轮播
				background: ['color1', 'color2', 'color3'],
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				cWidth: '',
				cHeight: '',
				pixelRatio: 2,
				scrollTop: 0,
				//定义头部字段
				headers: [{
						label: '日期',
						key: 'week_day',
						width: 140,
						widthInit: 140
					},

					{
						label: '新增会员',
						key: 'new_vip'
					},
					{
						label: '充值金额',
						key: 'fill_amt'
					},
					{
						label: '消费金额',
						key: 'pay_amt'
					}
				],
				//图表数据
				chartDataType: 'new_vip',
				chartData: {
					categories: [],
					series: {
						new_vip: [{
							name: '新增会员',
							data: [],
							color: 'rgba(85, 170, 127, 1.0)'
						}],

						fill_amt: [{
							name: '充值金额',
							data: [],
							color: 'rgba(85, 170, 127, 1.0)'
						}],
						pay_amt: [{
							name: '消费金额',
							data: [],
							color: 'rgba(85, 170, 127, 1.0)'
						}],
						pay_rate: [{
							name: '消费占比',
							data: [],
							color: 'rgba(85, 170, 127, 1.0)'
						}],
						length: 3
					}
				},
				//源数据
				resData: {
					sortkey: 'new_vip',
					total: {
						new_vip: {
							numder: 0.0,
							backgroundImage: 'linear-gradient(to top right, RGBA(151, 214, 226, 1), RGBA(85, 210, 184, 1))'
						},
						fill_amt: {
							numder: 0.0,
							backgroundImage: 'linear-gradient(to top right, rgba(141, 186, 253, 1.0), RGBA(143, 108, 244, 1))'
						},
						pay_amt: {
							numder: 0.0,
							backgroundImage: 'linear-gradient(to top right, RGBA(249, 197, 150, 1), RGBA(241, 121, 142, 1))'
						},
						pay_rate: {
							numder: 0.0,
							backgroundImage: 'linear-gradient(to top right, rgba(243, 243, 0, 1.0), rgba(232, 198, 2, 1.0))'
						}
					},
					list: [{
						week_day: 1,
						oper_date: '',
						month_str: '2020-08',
						new_vip: '', //int	新增会员数
						fill_amt: '', //	numeric(10,2)	充值金额
						pay_amt: '', //	numeric(10,2)	储值消费金额
						pay_rate: '', //	numeric(10,2)	消费金额占比
						viptype_name: '' //	string	会员类别名称
					}]
				},
				contents: [],

				urlCol: [{
						type: 'route',
						key: 'url'
					},
					{
						type: 'http',
						key: 'link'
					}
				],

				query: {
					dateType: 'm',
					dateSelect: [],
					anatype: 1, //分析周期 1、按周 2、按月 3、按年
					tottype: 1, //汇总类型 1、全部 2、按会员分类
					branch_jg: '', //机构 支持%为全部机构
					start_date: 10000000,
					end_date: 10000000
				},
				fromData: {
					version: '1',
					pageNo: 1,
					onePageNum: 10
				},
				//表格高度变量
				idTopHeight: "table-box",
				tableMargin: 20,
				topHeight: 100
			};
		},
		onLoad() {
			//chart
			this.cWidth = uni.upx2px(710);
			// #ifdef MP
			this.cHeight = uni.upx2px(430);
			// #endif
			// #ifndef MP
			this.cHeight = uni.upx2px(432);
			// #endif
			this.pixelRatio = uni.getSystemInfoSync().pixelRatio;
			if(this.pixelRatio > 2){
				this.pixelRatio = 2;
			}
		},
		// onReady() {
		// 	util.getListHeight(this);

		// },
		computed: {
			userInfo() {
				var userInfo = this.$store.getters.getUserInfo;
				return userInfo;
			},
			chartData1() {
				//console.log(this.$util.moneyUnit(-56835));

				let query = this.query;
				if (!query.dateType) {
					return;
				}
				//清除类别总数
				for (let item in this.resData.total) {
					this.resData.total[item].number = 0;
					this.resData.total[item].unit = '';
				}


				if (query.dateType == 'mz') {
					this.chartData.categories = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
				}
				if (query.dateType == 'm' && query.daysM) {
					for (var i = 0, len = query.daysM.length; i < len; i++) {
						if (query.daysM[i] % 2 == 0) {
							query.daysM[i] = ''
						}
					}
					this.chartData.categories = query.daysM;
				}
				if (query.dateType == 'y') {
					this.chartData.categories = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
				}
				var that = this;
				for (let item in this.chartData.categories) {
					//代表 chart X轴上的某一刻度
					item = parseInt(item);
					//清除chartData.series数据
					for (let key in this.resData.total) {
						this.chartData.series[key][0].data[item] = 0;
					}
					//根据不同的条件整理chartData.series数据
					this.resData.list.forEach(function(item1) {
						if (query.dateType == 'mz') {
							if (that.headers[0].key != 'week_day') {
								that.headers[0].key = 'week_day';
							}
							if (item + 1 == item1['week_day']) {
								item1['week_day'] = '周' + item1['week_day'];
								for (let key in that.resData.total) {
									that.chartData.series[key][0].data[item] = item1[key];
								}
							}
						}
						if (query.dateType == 'y') {
							if (that.headers[0].key != 'month_str') {
								that.headers[0].key = 'month_str';

							}

							if (item + 1 == item1['month_str'].slice(5, 7)) {
								for (let key in that.resData.total) {
									that.chartData.series[key][0].data[item] = item1[key];
								}
							}
						}

						if (query.dateType == 'm') {
							if (that.headers[0].key != 'oper_date') {
								that.headers[0].key = 'oper_date';
							}
							if (item + 1 == new Date(item1['oper_date']).getDate()) {
								item1['oper_date'] = query.year + '-' + query.month + '-' + new Date(item1['oper_date']).getDate();
								for (let key in that.resData.total) {
									that.chartData.series[key][0].data[item] = item1[key];
								}
							}
						}
					});
				}

				//算类别总数
				for (var i = 0; i < this.resData.list.length; i++) {
					for (let key in this.resData.total) {
						this.resData.total[key].number = this.$util.floatObj.add(this.resData.total[key].number || 0, this.resData.list[i]
							[key] || 0);
					}
					//加表格的%
					var item = this.resData.list[i];
					if (typeof item.pay_rate != 'string') {
						item.pay_rate = item.pay_rate + '%';
					}

				}
				for (let key in this.resData.total) {
					//算类别总数转换中文单位
					let item = this.$util.moneyUnit(this.resData.total[key].number);
					this.resData.total[key] = { ...this.resData.total[key],
						...item
					};

				}

				return this.chartData;
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.onSubmitSend();
				//渲染数据
				this.onChartDataType(this.chartDataType);
			});
			//this.$util.getListHeight(this);

			this.$util.getTopHeight(this, this.idTopHeight, this.tableMargin);

		},
		methods: {
			//点击排序
			onDateType(str) {
				this.resData.sortkey = str;
				this.login();
			},
			//为了遮住chart的滚动
			scroll: function(e) {
				this.scrollTop = e.detail.scrollTop;
			},
			onChartDataType(strType) {
				//分  三中图
				this.chartDataType = strType;
				this.showRing();
			},
			//时间回调
			onSubmitSend() {
				this.$emit('onSubmitSend', false);
			},
			//处理反馈
			onSubmit(dates) {
				console.log('onSubmit>>>', dates);
				if (dates) {
					//清除旧数据
					this.resData.list = [];
					this.query = { ...this.query,
						...dates
					};
					this.login();
				}
			},
			login() {
				if (this.query.branch_jg == '') {
					this.query.branch_name = this.userInfo.branch_name;
					this.query.branch_jg = this.userInfo.branch_default;
				}
				if (this.resData.sortkey == 'viptype_name') {
					//分类
					this.query.tottype = 2;
				} else {
					//全部
					this.query.tottype = 1;
				}
				let query = this.query;
				query = { ...this.fromData,
					Params: query
				};
				api_server.dwzy_GetAppVipAnalysis({
					data: query,
					success: res => {
						if (res.data.data) {
							this.resData.list = [];
							this.resData.list = res.data.data.appviplist;
							this.chartData = this.chartData1;
							let dd = {};
							let headersLen = this.headers.length - 1;
							if (this.resData.sortkey == 'viptype_name') {

								//数组常用splice,slice,splist
								if (this.headers[headersLen].label == "消费占比") {
									this.headers.splice(headersLen, 1);
								}
								if (this.headers[1].key != 'viptype_name') {
									let data = {
										label: '会员类别',
										key: 'viptype_name'
									};
									dd = this.headers.splice(1, 0, data);
								}
							} else {
								if (this.headers[headersLen].label != "消费占比") {
									var data = {
										label: '消费占比',
										key: 'pay_rate'
									}
									this.headers.push(data);
								}
								if (this.headers[1].label == '会员类别') {
									dd = this.headers.splice(1, 1);
								}
							}
							this.$util.getDefaultColWidth(this, 710, 'headers', 'defaultColWidth');
							this.showRing();
						}
					},
					fail(error) {
						console.log('error', error);
					}
				});
			},
			showRing() {
				let _self = this;
				let canvasId = 'cvsGuestOrder';
				let data1 = {
					$this: _self,
					canvasId: canvasId,

					type: 'line',
					fontSize: 11,
					legend: {
						show: true,
						position: "top",
						margin: 0,
						padding: 5,
						itemGap: 0,
						lineHeight: 15
					},
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: _self.chartData.categories,
					series: _self.chartData.series[_self.chartDataType],
					animation: true,
					xAxis: {
						type: 'grid',
						disableGrid: true,
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8
					},
					yAxis: {
						disableGrid: true,

						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						min: 10,
						max: 180,
						format: val => {
							return val.toFixed(0);
						}
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						line: {
							type: 'straight'
						}
					}
				};

				if (this.query.dateType == "m") {
					data1.xAxis.splitNumber = 12;
				}
				//#ifdef MP
				const query = uni.createSelectorQuery();
				query
					.select('#' + canvasId)
					.fields({
						node: true,
						size: true
					})
					.exec(res => {
						const canvas = res[0].node;
						const ctx = canvas.getContext('2d');
						canvas.width = res[0].width * _self.pixelRatio;
						canvas.height = res[0].height * _self.pixelRatio;

						data1.canvas2d = true;
						data1.context = ctx;
						canvaRing = new uCharts(data1);
					});
				//#endif
				//#ifndef MP
				canvaRing = new uCharts(data1);
				//#endif
			},
			touchRing(e) {
				canvaRing.showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data;
					}
				});
			},
			onSubmitAddress(e) {
				this.query.branch_jg = e.address.branch_no;
				this.query.branch_name = e.address.branch_name;
				this.login();
			}
		}
	};
</script>

<style scoped lang="scss">
	.select-box {
		margin: 0 30upx;
	}

	.dates-box {
		background-color: #fcfdfd;
		padding: 20upx 30upx 0 30upx;
		border-radius: 15upx 15upx 0 0;
	}

	.chart-box {
		border-radius: 0 0 15upx 15upx;
		padding: 0 20upx;
		background-color: #fcfdfd;
		
		.money-block {
			width: 100%;
			padding-top: 30upx;
			border-top: 1rpx solid #d7d7d7;

			.money-item {
				height: 160upx;
				border-radius: 10upx;
				box-shadow: 2rpx 2rpx 15rpx rgba(224, 32, 32, 0.2);

				.money {
					width: 100%;
				}

				label:nth-of-type(1) {
					height: 30upx;
					font-size: 30upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #fcfdfd;
					line-height: 62upx;
				}

				label:nth-of-type(2) {
					height: 38upx;
					font-size: 40upx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #fcfdfd;
				}

				.unit {
					height: 38upx;
					font-size: 40upx;
					font-family: Source Han Sans CN;
					font-weight: 600;
					color: #fcfdfd;
				}

				.title {
					height: 24upx;
					font-size: 20upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #fcfdfd;
				}
			}

			.money-item:nth-of-type(1) {
				background-color: red;
				background-image: linear-gradient(to top right, RGBA(151, 214, 226, 1), RGBA(85, 210, 184, 1));
			}

			.money-item:nth-of-type(2) {
				background-color: red;
				background-image: linear-gradient(to top right, RGBA(195, 134, 253, 1), RGBA(143, 108, 244, 1));
			}

			.money-item:nth-of-type(3) {
				background-color: red;
				background-image: linear-gradient(to top right, RGBA(249, 197, 150, 1), RGBA(241, 121, 142, 1));
			}
		}

	}
.qiun-charts {
	width: 710upx;
	height: 450upx;
	// #ifndef MP
	position: relative;
	// #endif
	background-color: rgba(0, 0, 0, 0);	
}
.charts { 
	height: 450upx; //小程序chart元素的高度(.qiun-charts元素外层  统一)
	// #ifdef MP
	width: 710upx; //小程序chart元素的宽度（同cWidth）（父级宽度减父级的padding宽度）
	// #endif
	// #ifndef MP
	width: 1400upx; //小程序chart元素的宽度（同cWidth）（父级宽度减父级的padding宽度）
	height: 900upx; //小程序chart元素的高度(.qiun-charts元素外层  统一)
	position: absolute;
	top: 0; 
	left: 0;
	transform: scale(0.5) translate(-50%, -50%);
	// #endif
	background-color: rgba(255, 255, 255, 1);
}
	.retailDetails-box {
		border-radius: 15upx;
		background-color: #fcfdfd;
		margin-top: 25upx;

		//控制组件的缩进（外边距）
		.sun-tietleBox {
			margin: 0 20upx;

			//slot style
			.dates {
				.date {
					margin-right: 20upx;
					padding: 0 20upx;
					height: 51upx;
					border: 1upx solid #d7d7d7;
					border-radius: 100upx;

					font-size: 30upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #717171;
				}

				.date {
					&:last-child {
						margin-right: 0upx;
					}
				}

				.selected {
					background: #128a80;
					font-size: 30upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #fefefd;
				}
			}
		}



		.table-box {}
	}
</style>
